<!-- eslint-disable vue/valid-v-else -->
<template>
	<div class="building-item">
		<div class="title">
			<img :src="require('@/views/verification/image/building_icon.png')" alt="" />
			<h3>{{ details?.address || '-' }}</h3>
		</div>

		<div class="item">
			<p>房屋编号</p>
			<p>{{ details?.fwbh || '-' }}</p>
		</div>
		<div class="item">
			<p>房主姓名</p>
			<p>{{ details?.hzxm || '-' }}</p>
		</div>
    <div class="item">
			<p>核验状态</p>
			<p :style="{ color: details?.hyzt === '已核验' ? '#3DC018' : '' }">{{ details?.hyzt || '-' }}</p>
		</div>
	</div>
</template>

<script setup>

defineProps({
	details: {
		type: Object,
		default: () => {}
	}
})


</script>

<style scoped lang="less">
.building-item {
	position: relative;
	margin: 0 20px 24px;
	background: #fff;
	box-shadow: 0 4px 8px 0 rgba(191, 191, 191, .5);
	border-radius: 12px;
	box-sizing: border-box;
	padding: 24px 32px;
	.title {
		display: flex;
		img {
			width: 48px;
			height: 48px;
		}
		h3 {
			width: 0;
			flex: 1;
			margin-left: 12px;
		}
	}
	.item {
		display: flex;
		margin-top: 12px;
		p {
			min-height: 40px;
			line-height: 40px;
			span {
				color: #696969;
				font-size: 24px;
			}
			&:nth-of-type(1) {
				color: #A0A0A0;
				width: 140px;
			}
			&:nth-of-type(2) {
				width: 0;
				flex: 1;
				color: #696969;
			}
		}
	}
	.btns {
		display: flex;
		justify-content: flex-end;
		gap: 12px;
		border-top: 2px solid var(--border-color);
		margin-top: 24px;
		padding: 20px 0;
		div {
			height: 50px;
			line-height: 50px;
			color: var(--van-primary-color);
			border-radius: 12px;
			font-size: 26px;
			&:nth-last-of-type(1) {
				background: var(--van-primary-color);
				color: #fff;
				padding: 0 12px;
			}
		}
	}


}
</style>
